<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content=""> 
        <meta name="author" content=""> 
        <base href="${request.contextPath}/">
     
        <title>ES分词搜索</title> 

        <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> 
        <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> 
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  		<link rel="stylesheet" href="resources/lib/layui-v2.3.0/layui/css/layui.css"  media="all">
        <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
        <!--[if lt IE 9]> 
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
        <![endif]--> 
</head> 

<body class="bs-docs-home"> 
    <div class="container theme-showcase"> 
        <h1 style=" line-height:2em;"> </h1><br /> 
       
        <div class="row"> 
            <div class="col-sm-3"></div> 
        <div class="col-sm-12"> 
            <div class="panel panel-default"> 
                <div class="panel-heading"> 
                    <h3 class="panel-title"><strong>内容搜索</strong></h3> 
                </div> 
                <div class="panel-body"> 
               
                       <form role="form" name="form1" id="from1"> 

                           <div class="form-group"> 
                               <label for="IDCard">请输入您的词条</label> 
                               <div class="input-group"> 
                                   <input type="text" class="form-control" id="word" name="word" placeholder="词条" value="中国" onchange="Es.change(this);"> 
                                   <span class="input-group-btn"> 
                                       <button class="btn btn-default" type="button" onClick="Es.submit();" >查询</button> 
                                   </span> 
                               </div> 
                           </div> 
         
                           <div class="form-group"> 
                               <label for="Subject">请选择需要搜索的分类</label> 
                               <div class="input-group"> 
                                   <input type="text" class="form-control" id="type" name="type" placeholder="请选择分类" value="政策法规" readonly="readonly"> 
                                   <div class="input-group-btn"> 
                                       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">分类 <span class="caret"></span></button> 
                                       <ul class="dropdown-menu pull-right"> 
                                           <li><a href="javascript:void(0);" onClick="$('#type').val('政策法规');">政策法规</a></li> 
                                           <li><a href="javascript:void(0);" onClick="$('#type').val('诗词');">诗词</a></li> 
                                       </ul> 
                                   </div> 
                               </div> 
                           </div> 
       
                       </form> 
             
                       <div class="table-responsive"> 
                           <table  border="0" cellspacing="0" cellpadding="0" class="table"> 
                               <tr class=" label-info"> 
                                   <th scope="col" colspan="1" class="text-center"><span style="color:white">标题</span></th> 
                                   <th scope="col" colspan="1" class="text-center"><span style="color:white">内容</span></th> 
                                   <th scope="col" colspan="1" class="text-center"><span style="color:white">操作</span></th> 
                               </tr> 
                           </table> 
                       </div>          
                   </div> 
               </div> 
           </div> 
      
           <div class="col-sm-3"></div> 
        </div> 
        
	    <div class="form-inline text-right">
		    <!-- <a class="btn btn-link " href="javascript:Es.submit('up');" id="up" role="button">上页</a>
		    <a class="btn btn-link " href="javascript:Es.submit('next');" id="next" role="button">下页</a> -->
		<div class="form-group text-right">
		    <div class="active" id="time">耗时:0/ms</div>
        	<div id="pageTool" ></div>  
		</div>
		</div>                    
    </div>  
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="resources/js/ext/animated.js"></script>
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script> 
 	<script src="resources/lib/layer-v3.1.1/layer/layer.js"></script> 
	<script src="resources/lib/layui-v2.3.0/layui/layui.js" charset="utf-8"></script>
</body> 

<script type="text/javascript">
//传输参数
var param={
		page:1,
		pageSize:1,
};
//配置参数
var	config={
		zcfgUrl:'http://127.0.0.1:1024/zcfg/',
		baidu:'http://www.baidu.com/s?wd=',
		type:null,
		animated_body:['animated bounce','animated rubberBand','animated wobble','animated tada','animated bounceInLeft','animated bounceInDown','animated bounceInRight','animated bounceInUp'],
		animated_tr:['animated bounce','animated rubberBand','animated wobble','animated tada','animated bounceInLeft','animated bounceInDown','animated bounceInRight','animated bounceInUp'],
		animated_del:['slideOutLeft','slideOutRight','rotateOutUpLeft','fadeOutDownBig']
};

var input = document.getElementById("word");

layui.use('laypage', function(page,pageSize){
var laypage = layui.laypage;

//Es接口
Es = {
	//发送数据
	send:function(config){
		$('.tr').remove();
		layer.load();
		$.ajax({
			   type: 'POST',
			   url: 'es/queryHighlight',
			   data: param,
			   success: function(d){
				   console.log("返回数据",d);
				   layer.closeAll();
				   var page=param.page;
				   var data=d.data;
				   var time=d.time;
				   var total=d.total;
				   var page=d.page;
				   var pageSize=d.pageSize;
				   if(data.length>0){
					   //重置下一页
					   $('#next').attr('href','javascript:Es.submit("next");');
					   console.log('下次传入参数:',param);
					   var html='';
					   console.log("返回数据",data);
					   $.each(data, function(i, n){
							html +='<tr class="active tr" id="'+data[i].id+'">';
							if(data[i].zcfgTitle!=undefined){
								html+='   <td><pre>'+(data[i].zcfgTitle)+'</pre></td>'
							}else if(data[i].title!=undefined){
								html+='   <td><pre>'+(data[i].title)+'</pre></td>'
							}else if(data[i].newsTitle!=undefined){
								html+='   <td><pre>'+(data[i].newsTitle)+'</pre></td>'
							}
							if(data[i].zcfgContent!=undefined){
								var url=config.zcfgUrl;
								var title=data[i].zcfgTitle;
								var reg=/<[^<>]+>/g;
								title=title.replace(reg,'');
								title=title+'.htm';
								url+=title;
								html +='  <td style="width: 40%;"><a href="'+url+'" target="_blank"><pre>'+data[i].zcfgContent+'</pre></a></td>';
							}else if(data[i].newsContent!=undefined){
								var url=config.baidu;
								var title=data[i].newsTitle;
								var reg=/<[^<>]+>/g;
								title=title.replace(reg,'');
								url+=title;
								html +='  <td style="width: 40%;"><a href="'+url+'" target="_blank"><pre>'+data[i].newsContent+'</pre></a></td>';
							}else{
								var url=config.baidu;
								var title=data[i].title;
								var reg=/<[^<>]+>/g;
								title=title.replace(reg,'');
								url+=title;
								html +='  <td style="width: 40%;"><a href="'+url+'" target="_blank"><pre>'+data[i].content+'</pre></a></td>';
							}
							html +='<td width="20%" class="text-center" style="vertical-align: middle"><a class="btn btn-link" href="javascript:Es.del(\''+data[i].id+'\',\''+data[i].index+'\',\''+data[i].type+'\');">删除</a><!--<a href="javascript:Es.update()">修改</a>--></td>';
							html +='</tr>' 	
					   });
					   $('.table').append(html);
					   Es.animated('.tr',config.animated_tr);
				   }else{
					   html +='<tr class="warning tr" colspan="2">';
					   html +='<td colspan="3" class="text-center">没有检索到数据</td>';
					   html +='</tr>';
					   $('.table').append(html)
					   //下一页失效
					   $('#next').attr('href','javascript:void(0);');
				   }
				   
				   $('#time').html('耗时：'+time+'/ms,总记录：'+total+'条');
				   
				   //警告
				   if(time<=50){
					   $('#time').attr({'class':'text-success'});
				   }else if(time>50 && time<=60){
					   $('#time').attr({'class':'text-warning'});
				   }else{
					   $('#time').attr({'class':'text-danger'});
				   }
				   
				   laypage.render({
						elem: 'pageTool', //注意，这里的 test1 是 ID，不用加 # 号
						count: total, //数据总数，从服务端得到
						curr: param.page,
						limit: pageSize,
						limits: [5,10,20,30,40,50],
						layout: ['count', 'prev', 'page', 'next', '  ', 'refresh', 'skip'],
						jump: function(obj,first){
							console.log(obj,first);

					      	if(!first) {
					          	var curr = obj.curr;
					          	param.page = obj.curr; 
					          	param.pageSize = obj.limit;
					    		Es.send(config);
					      	}
						}
					});

			   }
			});
	},
	//表单提交
	submit:function(type){
		console.log(param);
		config.type=type;
		var type=$('#type').val().trim();
		param.word=$('#word').val().trim();
		if(type==='政策法规'){
			param.type="doc";
			param.fileName="fileName,mainContent";
		}else if(type==='诗词'){
			param.type="poetry";
			param.fileName="title,content";
		}
		param.index="iflytek";
		param.type="doc";
		param.fileName="zcfgTitle,zcfgContent,newsTitle,newsContent,title,content";
   		if(config.type==='up'){
			if(param.page<=0){
				param.page=0;
			}else{
				param.page--;
			}
		}else if(config.type==='next'){
			param.page++;
		}else{
			param.page=1;
		}
		Es.send(config);
	},
	//节流函数
	throttle:function (fn,delay,text,mustApplyTime){
	    clearTimeout(fn.timer);
	    fn.cur=Date.now();

	    if(!fn.start){
	        fn.start=fn.cur;
	    }
	    if(fn.cur-fn.start>mustApplyTime){
	        fn.call(text);
	        fn.start=fn.cur;
	    }else{
	        fn.timer=setTimeout(function(){
	            fn.call(text);
	        },delay);
	    }
	},
	//文本变化请求
	change:function(word){
		Es.throttle(Es.submit, 500, $(word).val(),1000);
	},
	//删除数据
	del:function(id,index,type){

		var index=Math.ceil(Math.random()*config.animated_del.length);
		$('#'+id).animateCss(config.animated_del[index-1], function() {
			$('#'+id).remove();
		});
		/* var delParam={
				id:id,
				index:index,
				type:type,
		}
		layer.confirm('确定删除？', {
			  btn: ['确定','取消'] 
			}, function(){
				$.ajax({
			    	type: 'POST',
					url: 'es/del',
					data: delParam,
					success: function(d){
						console.log("删除",d);
						var index=Math.ceil(Math.random()*config.animated_del.length);
						$('#'+id).animateCss(config.animated_del[index-1], function() {
							$('#'+id).remove();
						});
					}
			});
			layer.closeAll();
		}) */
	},
	//动画库
	animated:function(clazz,animated){
		var index=Math.ceil(Math.random()*(animated.length));
		$(clazz).addClass(animated[index-1]);
	}
	
}

//页面动画
Es.animated('body',config.animated_body);


})


//键盘监听事件
/* input.addEventListener("keyup", function(event){
	if(this.value!==""){
		Es.throttle(Es.submit, 500, this.value,1000);
	}else{
		console.log("空值不予请求");
	}
}); */



</script>

</html>